<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息管理</title>
</head>
<body>
    <h1>学生信息管理</h1>
    <form id="studentForm" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br>
        <label for="gender">性别:</label>
        <input type="text" id="gender" name="gender" required><br>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" required><br>
        <label for="student_id">学号:</label>
        <input type="text" id="student_id" name="student_id" required><br>
        <label for="phone">电话:</label>
        <input type="text" id="phone" name="phone" required><br>
        <label for="class">班级:</label>
        <input type="text" id="class" name="class" required><br>
        <button type="submit">提交</button>
    </form>

    <h2>学生列表</h2>
    <ul id="studentsList"></ul>

    <script>
        document.getElementById('studentForm').onsubmit = function(event) {
            event.preventDefault();
            const studentData = {
                name: document.getElementById('name').value,
                gender: document.getElementById('gender').value,
                age: document.getElementById('age').value,
                student_id: document.getElementById('student_id').value,
                phone: document.getElementById('phone').value,
                class: document.getElementById('class').value
            };

            fetch('/addStudent', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(studentData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                document.getElementById('studentForm').reset();
                fetchStudents();
            })
            .catch((error) => {
                console.error('Error:', error);
                alert('提交失败，请重试');
            });
        };

        function fetchStudents() {
            fetch('/getStudents')
            .then(response => response.json())
            .then(data => {
                const studentsList = document.getElementById('studentsList');
                studentsList.innerHTML = '';
                data.forEach(student => {
                    const li = document.createElement('li');
                    li.innerHTML = `${student.name} - ${student.student_id} - ${student.class}`;
                    const deleteBtn = document.createElement('button');
                    deleteBtn.textContent = '删除';
                    deleteBtn.onclick = function() { deleteStudent(student.student_id); }; // Use student_id for deletion
                    li.appendChild(deleteBtn);
                    studentsList.appendChild(li);
                });
            })
            .catch((error) => {
                console.error('Error:', error);
                alert('获取学生列表失败，请重试');
            });
        }

        function deleteStudent(studentId) {
            fetch('/deleteStudent', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `student_id=${studentId}` // Send student_id for deletion
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                fetchStudents();
            })
            .catch((error) => {
                console.error('Error:', error);
                alert('删除失败，请重试');
            });
        }

        document.addEventListener('DOMContentLoaded', fetchStudents);
    </script>
</body>
</html>